<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" >
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link type="text/css" rel="stylesheet" href="css/estilo.css" />
	<link type="text/css" rel="stylesheet" href="css/syntaxhighlighter.css" />
</h:head>
<h:body>
	<table width="971" align="center">
	<tr>
		<td colspan="2"><img src="img/cabecera.jpg" alt="" width="971" height="62" /></td>
	</tr>
	<tr>
		<td colspan="2" >
			<h:form id="menu" >
				<p:menubar autoSubmenuDisplay="true" style="width: 965px;" >
			        <p:submenu label="Comision de Servicios" icon="ui-icon ui-icon-document" >
						<p:menuitem value="Requerimiento de comision" action="#{RequerimientoComision.buscar}" ajax="false" />
						<p:menuitem value="Buscar Requerimiento de comision" action="#{BuscarComision.requerimiento}" ajax="false" />
					</p:submenu>
					<p:submenu label="Generacion de Planilla de viaticos" icon="ui-icon ui-icon-document">
						<p:menuitem value="Calculo de viaticos" action="#{CalculoViatico.buscar}" ajax="false" />
					</p:submenu>
					<p:submenu label="Rendición de gastos" icon="ui-icon ui-icon-document">
						<p:menuitem value="Rendición de comisión" action="#{RendicionComision.buscar}" ajax="false" />
						<p:menuitem value="Declaracion Jurada" url="#" />
					</p:submenu>
					<p:menuitem value="Salir" url="#" />
				</p:menubar>
			</h:form>
		</td>
	</tr>
	<tr>
    	<td colspan="2" align="left" style="font-size:20px" >
    		<h:outputText value="#{BuscarComision.tituloVentana}" /> 
    	</td>
    </tr>
	<tr>
    	<td colspan="2" align="center" >
    	<div>
    		<h:form id="buscar" >
    		<TABLE>
	    		<tr>
		    		<td>Numero Comision</td>
		    		<td><p:inputText id="numComision" size="10" value="#{BuscarComision.numComision}" /></td>
	    			<td>Inicio Fecha de comision</td>
	    			<td nowrap="nowrap" >
	    				<p:calendar id="fInicio" value="#{BuscarComision.fInicio}" pattern="dd/MM/yyyy" mode="popup" showOn="button" locale="es" readOnlyInputText="TRUE" size="10" />
	    			</td>
	    			<td></td>
	    			<td>Fin Fecha de comision</td>
	    			<td nowrap="nowrap" >
	    				<p:calendar id="fFin" value="#{BuscarComision.fFin}" pattern="dd/MM/yyyy" mode="popup" showOn="button" locale="es" readOnlyInputText="TRUE" size="10" />
	    			</td>
	    			<td></td>
	    			<td>
	    				<p:commandButton value="Nueva" action="#{BuscarComision.mostrar}" ajax="false"  />
	    			</td>
	    		</tr>
	    		<tr>
	    			<td>Apellido Paterno</td>
	    			<td colspan="2" ><p:inputText id="apePaterno" size="30" value="#{BuscarComision.apePaterno}" /></td>
	    			<td></td>
	    			<td>Apellido Materno</td>
	    			<td colspan="2"><p:inputText id="apeMaterno" size="30" value="#{BuscarComision.apeMaterno}" /></td>
	    			<td></td>
	    			<td>
	    				<p:commandButton value="Buscar" action="#{BuscarComision.buscar}" ajax="false"  />
					</td>
	    		</tr>
    		</TABLE>
    		</h:form>
    	</div>
    	</td>
    </tr>
    <tr>
    	<td colspan="2" align="center" >
	    <div align="center" style="width: 971px;" >
			<h:form>
				<p:dataTable var="comision" value="#{BuscarComision.comisiones}" paginator="true" rows="5" paginatorPosition="bottom" >
					<p:column>
						<f:facet name="header">
							<h:outputText value="N° Comision" />
						</f:facet>
						<h:outputText value="#{comision.comisionId}" />
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Apellido Paterno" />
						</f:facet>			
						<h:outputText value="#{comision.apellidoPaterno}" />
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<h:outputText value="Apellido Materno" />
						</f:facet>
						<h:outputText value="#{comision.apellidoMaterno}" />
					</p:column>
					
					<p:column>
						<f:facet name="header">
							<h:outputText value="Nombres" />
						</f:facet>
						<h:outputText value="#{comision.nombre}" />
					</p:column>
					
					<p:column style="align:center" >
						<f:facet name="header"  >
							<h:outputText value=" " />
						</f:facet>
						 <p:button value="Modificar" outcome="requerimientoComision" >
						 	<f:param name="comisionId" value="#{comision.comisionId}" />
						 </p:button>
					</p:column>
				</p:dataTable>
			</h:form>
		</div>
		</td>
	</tr>
	<tr><td colspan="2"><img src="img/pie.jpg" alt="" width="971" height="40" /></td></tr>
        </table>
</h:body>
</html>